<template>
  <div>
    <el-card>
      <el-button type="primary" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
      <tree-table class="treeTable" :data="cateList" :columns="columns" :expand-type="false" :selection-type="false">
        <template slot="level" slot-scope="scope">
          <el-tag v-if="scope.row.level == 1">一级分类</el-tag>
          <el-tag v-else-if="scope.row.level == 2" type="success">二级分类</el-tag>
          <el-tag v-else type="warning">三级分类</el-tag>
        </template>
        <template slot="opt" slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </tree-table>
    </el-card>

    <el-dialog title="新增分类" :visible.sync="addCateVisible" width="30%" @close="addDialogClose">
      <el-form ref="addCateFormRef" :rules="addCateRules" :model="addCateForm" label-width="80px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="addCateForm.name" />
        </el-form-item>
        <el-form-item label="父级分类">
          <el-cascader v-model="selectedKeys" clearable :options="optionsList" separator=" > " :props="{ expandTrigger: 'hover', label: 'name', value: 'id', checkStrictly: true }" @change="changeSelected" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogClose">取 消</el-button>
        <el-button type="primary" @click="addCateCommit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cate, addCate } from '@/api/category'
export default {
  name: 'CateList',
  data() {
    return {
      cateList: [],
      columns: [
        { label: '分类名称', prop: 'name' },
        { label: '分类等级', type: 'template', template: 'level' },
        { label: '操作', type: 'template', template: 'opt' }
      ],
      addCateVisible: false,
      addCateForm: {
        name: '',
        pid: 0,
        level: 1
      },
      optionsList: [],
      addCateRules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      },
      selectedKeys: []
    }
  },
  mounted() {
    this.getCateList()
  },
  methods: {
    // 获取商品分类列表
    async getCateList() {
      const res = await cate()
      if (res.status !== 200) return this.$message.error('获取商品分类列表失败！')
      this.cateList = res.data
    },
    // 编辑操作
    handleEdit() {

    },
    // 删除操作
    handleDel() {

    },
    // 新增弹框按钮
    async showAddDialog() {
      this.addCateVisible = true
      const res = await cate({ level: 2 })
      if (res.status !== 200) return this.$message.error('获取分类数据失败！')
      this.optionsList = res.data
    },
    // 新增弹框确定的按钮
    async addCateCommit() {
      const res = await addCate(this.addCateForm)
      if (res.status !== 200) return this.$message.error('新增商品分类失败！')
      this.$message.success('新增商品分类成功！')
      this.addDialogClose()
    },
    // 关闭弹框的回调
    addDialogClose() {
      this.addCateForm.pid = 0
      this.addCateForm.level = 1
      this.$refs.addCateFormRef.resetFields()
      this.addCateVisible = false
      this.getCateList()
    },
    // 级联选择框变换的回调
    changeSelected() {
      if (this.selectedKeys.length > 0) {
        this.addCateForm.pid = this.selectedKeys[this.selectedKeys.length - 1]
        this.addCateForm.level = this.selectedKeys.length + 1
      } else {
        this.addCateForm.pid = 0
        this.addCateForm.level = 1
      }
    }
  }

}
</script>

<style scoped>
.treeTable {
  margin-top: 20px;
}
</style>
